<template>
	<view class="wrap">
		<uninavbar title="用户中心" leftIcon='' rightIcon='' rightText="退出" @custom-event="logout" />
		<view class="status-bar"></view>
		<view class="content">
			<view class="user">
				<view class="base-info">
					<view class="user-info">
						<view class="avatar" :class="[user.id > 0 && !user.icon ? 'default-avatar' : '']">
							<navigator v-if="user.icon" url="profile" hover-class="none">
								<image :src="user.icon"></image>
							</navigator>
							<image v-else src="/static/images/default_user_photo_02.png" @tap="login()"></image>
						</view>
						<view v-if="user.id > 0" class="info" hover-class="none" url="/pages/user/profile">
							<view class="nickname">{{ user.nickname||user.username }}</view>
							<view class="mobile" v-if="user.phone">{{ user.phone }}</view>
						</view>
						<view v-else class="info">
							<view class="btn-login" @tap="login()">{{ loginText }}</view>
						</view>
						<view class="setting hidden" v-if="user.id > 0">
							<navigator class="btn-setting" url="/pages/user/profile">
								<iconfont type="modify-pen"></iconfont>
							</navigator>
						</view>
					</view>
				</view>
			</view>
			<view class="nav">

				<view class="navTitle">
					我的订单
				</view>
				<view class="list">
					<view class="item" @tap="userUrlPage('pages/user/obligation?status=0')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/d1.png" mode=""></image>
								<text>待付款</text>
							</view>

						</view>
					</view>
					<view class="item" @tap="userUrlPage('pages/user/obligation?status=1')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/d2.png" mode=""></image>
								<text>待发货</text>
							</view>

						</view>
					</view>
					<view class="item" @tap="userUrlPage('pages/user/obligation?status=2')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/d3.png" mode=""></image>
								<text>待收货</text>
							</view>

						</view>
					</view>
					<view class="item" @tap="userUrlPage('pages/user/obligation?status=3')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/d6.png" mode=""></image>
								<text>已完成</text>
							</view>

						</view>
					</view>

				</view>
				<view class="list listTow">
					<!-- <navigator class="item" url="/pages/common/about">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u1.png" mode=""></image
								<text>手机充值</text>
							</view>
						</view>
					</navigator> -->
					<!-- 	<navigator class="item" url="/pages/user/feedback">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u2.png" mode=""></image>
								<text>我的优惠券</text>
							</view>
						</view>
					</navigator> -->
					<!-- <navigator class="item" url="/pages/user/feedback">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u3.png" mode=""></image>
								<text>我的钱包</text>
							</view>
						</view>
					</navigator> -->
					<!-- <navigator class="item" url="/pages/user/feedback">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u4.png" mode=""></image>
								<text>我的消息</text>
							</view>
						</view>
					</navigator> -->
					<view class="item" @tap="userUrlPage('pages/user/receivingAddress')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u5.png" mode=""></image>
								<text>我的地址</text>
							</view>
						</view>
					</view>
					<view class="item" @tap="userUrlPage('pages/user/favorite')">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u8.png" mode=""></image>
								<text>我的收藏</text>
							</view>

						</view>
					</view>
					<!-- 	<navigator class="item" url="/pages/user/feedback">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u6.png" mode=""></image>
								<text>意见反馈</text>
							</view>
						</view>
					</navigator> -->
					<navigator class="item" url="/pages/user/service">
						<view class="info">
							<view class="name">
								<image src="/static/images/user/u7.png" mode=""></image>
								<text>客服中心</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
			<view class="tab-bar"></view>
		</view>
		<pageLoading v-if="showPageLoading"></pageLoading>
	</view>
</template>

<script>
	import iconfont from '@/components/iconfont/iconfont.vue';
	import pageLoading from '@/components/loading/pageLoading.vue';
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	export default {
		components: {
			iconfont,
			pageLoading,
			uninavbar
		},
		data() {
			return {
				user: {},
				loginText: '登录',
				showPageLoading: true
			};
		},
		onShow() {
			this.$initPageTitle(); //初始化页面标题
			// #ifdef MP
			this.loginText = '微信登录';
			// #endif
			this.getUserInfo(); //获取用户信息
			//登录
			let source = uni.getStorageSync('source');
			if (source == 'login' || source == 'storyEdit') {
				uni.removeStorageSync('source');
			}
		},
		onLoad(e) {
			// this.getUserInfo(); //获取用户信息
		},
		// onPullDownRefresh() {
		// 	uni.showLoading({
		// 		title: '刷新中'
		// 	});
		// 	this.getUserInfo(); //获取用户信息
		// },
	
		methods: {
		
			userUrlPage(item) {
				const array = ['pages/user/receivingAddress', 'pages/user/favorite',
					'pages/user/obligation?status=3',
					'pages/user/obligation?status=2', 'pages/user/obligation?status=1',
					'pages/user/obligation?status=0'
				];
				const isIncluded = array.includes(item);
				if (isIncluded) {
					if (this.user.id > 0) {
						uni.navigateTo({
							url: '/' + item
						})

					} else {
						this.$alert('用户未登录');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/common/login'
							});
						}, 1000);

					}

				}
			},
			getUserInfo: function() {
				API.ssoInfo().then(res => {
						this.showPageLoading = false;
						if (res.code == 200) {
							this.user = res.data;
						}
					})
					.catch(err => {
						this.showPageLoading = false;
						console.log(err)
					})
			},
			/*获取用户信息*/
			// getUserInfo() {
			// 	this.$app.request({
			// 		url: this.$api.user.index,
			// 		data: {},
			// 		method: 'POST',
			// 		dataType: 'json',
			// 		success: res => {
			// 			console.log(res);
			// 			if (res.code == 0) {
			// 				this.showPageLoading = false;
			// 				this.user = res.data;
			// 			} else {
			// 				this.$alert(res.msg);
			// 			}
			// 		},
			// 		complete: res => {
			// 			uni.stopPullDownRefresh();
			// 			uni.hideLoading();
			// 		}
			// 	});
			// },

			/*登录*/
			login() {
				this.$app.login();
			},

			/*退出登录*/
			logout() {
				uni.showModal({
					title: '提示',
					content: '退出登录？',
					confirmText: '是',
					cancelText: '否',
					success: result => {
						if (result.confirm) {
							localStorage.clear();
							uni.redirectTo({
								url: '/pages/user/index'
							});
							location.reload(true);
							this.getUserInfo()
						} else if (result.cancel) {
							console.log('用户取消操作');
							// 执行取消逻辑
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		padding-top: 80rpx;
	}

	.top {

		/*页面标题*/
		.page-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			text-align: center;
			z-index: 9999;
			font-size: 38rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.user {
		.base-info {
			//background-image: linear-gradient(top, #e4edec 20%, #e4edec 80%);
			// background: #fff;
		}

		.user-info {
			padding: 40rpx 32rpx;
			display: flex;
			align-item: center;
			justify-content: space-between;

			.avatar {
				flex-grow: 0;
				flex-shrink: 0;
				line-height: 0;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
				}
			}

			.default-avatar {
				margin-top: -12rpx;
			}

			.info {
				flex-grow: 1;
				flex-shrink: 1;
				padding-left: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.nickname {
					font-size: 44rpx;
					color: #000;
					margin-top: -14rpx;
				}

				.mobile {
					font-size: 34rpx;
					color: #000;
					display: flex;
					align-items: center;
					line-height: normal;
					font-size: 22rpx;
					color: #999;

					::v-deep .icon {
						margin-left: 30rpx;
						font-size: 28rpx;
						display: block;
					}
				}

				.user-type {
					display: flex;
					margin-top: 6rpx;

					text {
						font-size: 24rpx;
						color: #fff;
						background-color: #cd8202;
						padding: 0 24rpx;
						border-radius: 55px;
					}
				}

				.btn-login {
					font-size: 42rpx;
					background: transparent;
					color: #666;
					text-align: left;
					width: 200rpx;
				}
			}

			.setting {
				flex-grow: 0;
				flex-shrink: 0;

				.btn-setting {
					margin-top: 10rpx;

					::v-deep .icon {
						color: #fff;
						font-size: 48rpx;
					}
				}
			}
		}
	}

	.nav {
		margin-top: -15rpx;
		padding: 0 40rpx;

		.navTitle {
			background-color: #fff;
			padding: 20rpx;
			padding-bottom: 0;
		}

		.list {
			margin-bottom: 20rpx;
			display: flex;
			width: 100%;
			padding: 20rpx;
			background: #ffffff;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;

			.item {

				width: 20%;
				border-radius: 20rpx;
				font-size: 20rpx;
				text-align: center;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						image {
							width: 66rpx;
							height: 66rpx;
						}



					}

					::v-deep .icon {
						color: #c1c4c9;
						font-size: 24rpx;
					}
				}

				&:last-child {
					.info {
						border-bottom: 0;
					}
				}
			}
		}

		.listTow {
			.item {
				width: 25%;
				margin: 20rpx 0;
			}
		}
	}

	.status-bar {
		background: #6954D5;
	}
</style>